import React, { useEffect, useState } from 'react';
import Card from '../Card';
import './index.less';
import { TypeProps } from '../typeProps';
import { Row, Col } from '../..';

class PortalProps extends TypeProps {
  // 外层阴影
  elevation? = 0 as number;
  title?: React.ReactNode;
  rightContext?: React.ReactNode;
}

const CardInfo: React.FC<PortalProps> = (props: PortalProps) => {
  const {
    title,
    elevation,
    style: styles,
    children,
    className,
    rightContext,
  } = props;
  const [style, setStyle] = useState<React.CSSProperties | undefined>();

  useEffect(() => {
    setStyle({ ...style, ...styles });
  }, [props?.style]);
  const classes = ['song-card-info-style', className].join(' ');
  const renderTitle = (
    <div className="song-card-title">
      <Row>
        <Col span={!rightContext ? 24 : 12}>{title}</Col>
        {rightContext && <Col span={12}>{rightContext}</Col>}
      </Row>
    </div>
  );

  return (
    <Card style={style} className={classes} elevation={elevation}>
      {renderTitle}
      <div className="song-card-context">{children}</div>
    </Card>
  );
};

export default CardInfo;
